// 创建加载动画的元素
// 页面一进来就初始化加载动画
(function () {
  // js 加载完成后 html 和 body 可见
  document.documentElement.style.opacity = 1;
  document.body.style.opacity = 1;

  // 创建 <style> 标签，并插入样式
  const styleTag = document.createElement("style");
  styleTag.id = "loaderStyles"; // 给 <style> 标签设置 ID

  styleTag.innerHTML = `
        /* 定义全局的变量 */
    :root {
        --light-color: #f4c042;
        --dark-color: #7a5600;
    }

    /* 将所有元素以及它的伪元素的内外边距清除,并且改变盒子模型的计算方法 */
    *,
    *::before,
    *::after {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    /* 模糊层和动画容器 */
    .loading-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(233, 234, 237, 1);
        backdrop-filter: blur(5px);
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity 0.5s ease-out;
    }

    /* 动画部分 */
    .loading-container .container {
        position: relative;
        width: 300px;
        height: 300px;
        background: transparent; /* 设置背景为透明 */
    }

    /* 太阳 start */
    .loading-container .container .sun {
        position: absolute;
        top: 135px;
        left: calc(50% - 136px / 2);
        width: 136px;
        height: 136px;
        animation: sun 2.7s linear infinite;
        transform: translateZ(0); /* 强制 GPU 加速 */
    }
    /* 圆圈 start */
    .loading-container .container .sun .sun-body {
        position: absolute;
        top: 18px;
        left: 18px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 6px solid var(--dark-color);
        animation: sun-body 2.7s linear infinite;
        transform: translateZ(0); /* 强制 GPU 加速 */
    }
    /* 圆圈 end */
    /* 外层光线 start */
    .loading-container .container .sun .sun-body .line {
        position: absolute;
        top: -24px;
        left: calc(50% - 3px);
        width: 6px;
        height: 12px;
        border-radius: 6px;
        background-color: var(--dark-color);
        transform: rotate(calc(var(--i) * 45deg)) translateZ(0); /* 合并旋转和GPU加速 */
        transform-origin: center 68px;
    }
    /* 外层光线 end */
    /* 眼睛 start */
    .loading-container .container .sun .eye {
        position: absolute;
        top: 60px;
        left: 40px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--dark-color);
        box-shadow: 16px 0 var(--dark-color);
        animation: eye 2.7s linear infinite;
        transform: translateZ(0); /* 强制 GPU 加速 */
    }
    /* 眼睛 end */
    /* 太阳 end */

    /* 地平线 start */
    .loading-container .container .horizon {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 115px;
        background: rgba(233, 234, 237);
    }
    .loading-container .container .horizon::before {
        content: "";
        position: absolute;
        left: 5%;
        width: 90%;
        height: 6px;
        border-radius: 6px;
        background-color: var(--dark-color);
    }
    /* 地平线 end */
    /* loading 字样 start */
    .loading-container .container .horizon::after {
        content: "Loading...";
        position: absolute;
        top: 30px;
        width: 100%;
        text-align: center;
        font-size: 25px;
        color: var(--dark-color);
        animation: loading 2.7s linear infinite;
    }
    /* loading 字样 end*/

    @keyframes sun {
        10% {
            transform: translate(0) translateZ(0); /* 添加 translateZ(0) */
        }
        40%, 70% {
            transform: translateY(-40px) translateZ(0); /* 添加 translateZ(0) */
        }
    }

    @keyframes sun-body {
        40% {
            transform: rotate(0) translateZ(0); /* 添加 translateZ(0) */
        }
        50%, 100% {
            transform: rotate(45deg) translateZ(0); /* 添加 translateZ(0) */
        }
    }

    @keyframes eye {
        50%, 60% {
            transform: scale(1) translateZ(0); /* 添加 translateZ(0) */
        }
        55% {
            transform: scaleY(0.1) translateZ(0); /* 添加 translateZ(0) */
        }
        70%, 100% {
            transform: translateX(34px) translateZ(0); /* 添加 translateZ(0) */
        }
    }

    @keyframes loading {
        40% {
            opacity: 1;
        }
        60% {
            opacity: 0;
        }
    }

    /* 当加载完成时应用此类 */
    .loading-container.hidden {
        opacity: 0;
        visibility: hidden;
    }
  `;

  // 将样式标签添加到头部
  document.head.appendChild(styleTag);

  // 创建加载容器
  const loadingContainer = document.createElement("div");
  loadingContainer.className = "loading-container";
  document.body.appendChild(loadingContainer);

  // 创建 container div
  const container = document.createElement("div");
  container.className = "container";
  loadingContainer.appendChild(container);

  // 创建太阳部分
  const sun = document.createElement("div");
  sun.className = "sun";
  container.appendChild(sun);

  // 创建太阳主体和光线
  const sunBody = document.createElement("div");
  sunBody.className = "sun-body";
  for (let i = 1; i <= 8; i++) {
    const line = document.createElement("div");
    line.className = "line";
    line.style.setProperty("--i", i);
    sunBody.appendChild(line);
  }
  sun.appendChild(sunBody);

  // 创建太阳的眼睛
  const eye = document.createElement("div");
  eye.className = "eye";
  sun.appendChild(eye);

  // 创建地平线
  const horizon = document.createElement("div");
  horizon.className = "horizon";
  container.appendChild(horizon);
})();

// 移除加载动画
function removeLoader() {
  // 获取加载容器元素
  const loaderElement = document.querySelector(".loading-container");

  if (!loaderElement) return; // 如果找不到加载容器，则直接返回

  // 添加隐藏类，触发过渡效果
  loaderElement.classList.add("hidden");

  // 动画结束后彻底移除加载容器
  if (loaderElement && loaderElement.parentNode) {
    loaderElement.remove(); // 使用remove()方法移除元素
  }

  // 移除样式标签
  const styleToRemove = document.getElementById("loaderStyles"); // 通过ID获取 <style> 标签
  if (styleToRemove && styleToRemove.parentNode) {
    styleToRemove.remove(); // 使用remove()方法移除样式标签
  }
}
